<template>
    <div class="canvas-container">
        <canvas id="myCanvas" ref="myCanvas" :width="data.innerWidth" :height="data.innerHeight"></canvas>
    </div>
</template>
<script setup>
import { ref, onMounted, reactive, defineProps } from 'vue';
var data = reactive({
    // charString: 'console.log("hellow word")',
    charString: '01010101',
    colors: [
        '#33B5E5',
        '#0099CC',
        '#AA66CC',
        '#9933CC',
        '#669900',
        '#FFBB33',
        '#FF8800',
        '#FF4444',
        '#CC0000',
        'green'
    ],
    columnWidth: 12,
    fontSize: 12,
    innerWidth: window.innerWidth,
    innerHeight: window.innerHeight,
    ctx: null
})
const myCanvas = ref(null);
const columnCount = Math.floor(data.innerWidth / data.columnWidth)
const rowCount = Math.floor(data.innerHeight / data.fontSize)
const columnNextIndexs = new Array(columnCount).fill(rowCount + data.fontSize)
const getRandomChar = () => {
    return data.charString[Math.floor(Math.random() * data.charString.length)]
}
const getRandomColor = () => {
    return data.colors[Math.floor(Math.random() * data.colors.length)]
}
const draw = () => {
    data.ctx.fillStyle = `rgba(0, 0, 0, 0.05)`;
    data.ctx.fillRect(0, 0, window.innerWidth, window.innerHeight)
    /* 定义一下字体大小， 同时y坐标每行的所需高度就是字体大小的高度 */
    const fontsize = data.fontSize;
    /* 获取一个随机颜色用于字体绘制 */
    /* 设置字体格式和字体大小，这个随意自己设置 */
    data.ctx.font = `${fontsize}px "Microsoft YaHei"`;
    /* 循环列数次，同时每次计算出xy的坐标，因为是第一行所以y默认就是 1 * 字体高度 */
    for (let i = 0; i < columnCount; i++) {
        const x = i * data.columnWidth;
        // const y = 1 * fontsize
        const y = columnNextIndexs[i] * fontsize
        /* 绘制 三个参数分别是 字符  x坐标 y坐标 */
        data.ctx.fillStyle = getRandomColor();
        data.ctx.fillText(getRandomChar(), x, y)
        columnNextIndexs[i]++
        if (y > data.innerHeight && Math.random() > .9) {
            columnNextIndexs[i] = 1
        }
    }
}
function initCanvas() {

    data.ctx = myCanvas.value.getContext('2d');
    draw()
    setInterval(() => draw(), 40)

}
onMounted(() => {
    initCanvas()
})
</script>
<style>
body {
    margin: 0
}

#myCanvas {
    background-color: black;
}

.canvas-container {
    width: 100%;
    height: 100%;
}

canvas {
    width: 100%;
    height: 100%;
}
</style>